<template>
    <div id="MainNav">
<!--        <div >-->
<!--            <img alt="" :src="logoSrc" class="nav_log">-->
<!--        </div>-->

        <div class="nav">
            <ul class="nav_main">
                <li>
                    <router-link :to="{name: 'home'}">首页</router-link>
                </li>
                <li class="inside_l">
                    <router-link :to="{name: 'personal'}">个人中心</router-link>
                </li>
            </ul>

            <div class="nav_main_button">
                <router-link :to="{name: 'login'}">登陆 / 注册</router-link>
            </div>

            <ul class="nav_main">
                <li>
                    <router-link class="inside_r" :to="{name: 'formApplication'}">表单申请</router-link>
                </li>
                <li>
                    <router-link class="inside_mr" :to="{name: 'backStage'}">后台</router-link>
                </li>
            </ul>
        </div>

<!--        <div class="search">-->
<!--            <input type="text" class="" placeholder="查找..">-->
<!--            <i class="fa fa-search" aria-hidden="true"></i>-->
<!--            <button>-->
<!--                <i class="fa fa-times-circle" aria-hidden="true"></i>-->
<!--            </button>-->
<!--        </div>-->
    </div>
</template>

<script>
    export default {
        name: "MainNav",
        data() {
            return {
                logoSrc: require('@/assets/images/Logo.png')
            }
        }
    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    input{
        outline: none;
    }
    #MainNav{
        position: relative;
        width: 100%;
        height: 50px;
        background-color:black;
    }
    .nav_log{
        position: absolute;
        top:50%;
        margin-top: -20.5px;
        width: 96px;
        height: 41px;
        margin-left: 19px;
    }
    .nav{
        position: absolute;
        top:50%;
        left: 48.5%;
        margin-top: -18px;
        margin-left: -250px;
        width: 543px;
        height: 36px;
    }
    .nav_main li{
        list-style: none;
    }
    .nav_main li a{
        position: absolute;
        top:50%;
        margin-top: -11.5px;
        height:23px;
        border: none;
        outline: none;
        background: rgba(0,0,0,0.00);
        cursor: pointer;
        font-size: 17px;
        color: #999;
        font-family: 微软雅黑, 微软雅黑-Regular;
        transition: 0.4s;
    }
    .nav_main li a:hover{
        color: #ffffff;
    }
    .nav_main .inside_l a{
        margin-left:70px;
    }

    .nav_main_button a{
        position: absolute;
        margin-left:162px;
        width:203px;
        height:36px;
        line-height: 36px;
        outline: none;
        border: none;
        background: #03A9F4;
        cursor: pointer;
        font-size: 18px;
        font-family: 微软雅黑, 微软雅黑-Regular;
        border-radius: 50px;
        text-align: center;
        color: #BDBDBD;
        transition: 0.4s;
    }
    .nav_main_button a:hover{
        background: #0e60ff;
        color: #ffffff;
    }
    .inside_r{
        margin-left: 407px;
    }
    .inside_mr{
        margin-left: 493px;
    }
    .search{
        position: absolute;
        top:50%;
        margin-top: -12px;
        width: 184px;
        height: 24px;
        right: 110px;
    }
    .search input{
        position: absolute;
        top:50%;
        margin-top: -12px;
        width: 159px;
        height: 24px;
        border: none;
        padding-left:25px;
        font-size: 17px;
        color: #999;
        background-color: black;
    }
    .fa-search{
        position: absolute;
        top:50%;
        margin-top: -11px;
        left: 2px;
        font-size: 22px;
        color: #999;
    }
    .search button{
        position: absolute;
        top:50%;
        right: 0px;
        margin-top: -12px;
        width: 24px;
        height: 24px;
        border: none;
        outline: none;
        cursor: pointer;
        background-color: black;
    }
    .fa-times-circle{
        font-size: 24px;
        color: white;
    }
</style>

